<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>小疯子博客系统</title>

    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="/adminlte/plugins/fontawesome-free/css/all.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/adminlte/dist/css/adminlte.min.css">
    <!-- Google Font: Source Sans Pro -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-treegrid/0.2.0/css/jquery.treegrid.min.css" rel="stylesheet">
    <link href="https://unpkg.com/bootstrap-table@1.18.1/dist/bootstrap-table.min.css" rel="stylesheet">

    <!-- jQuery -->
    <script src="/adminlte/plugins/jquery/jquery.min.js"></script>
    <!-- alert -->
    <script src="/js/alert.js"></script>
    <!-- Bootstrap 4 -->
    <script src="/adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- AdminLTE App -->
    <script src="/adminlte/dist/js/adminlte.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-treegrid/0.2.0/js/jquery.treegrid.min.js"></script>
    <script src="/bootstrap-table/bootstrap-table.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.18.1/dist/extensions/treegrid/bootstrap-table-treegrid.min.js"></script>
    <script src="/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <script>
        $.prototype.serializeObject = function () {
            var a,o,h,i,e;
            a = this.serializeArray();
            o={};
            h=o.hasOwnProperty;
            for(i=0;i<a.length;i++){
                e=a[i];
                if(!h.call(o,e.name)){
                    o[e.name]=e.value;
                }
            }
            return o;
        }
    </script>
    <style>
        .distance {
            margin-top: 5px;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div id="updateDiv" style="display: none">
        <input id="alert" type="button" value="Alert" />
        <input id="confirm" type="button" value="Confirm" />
    </div>
    <!-- head view -->
    <#include "/common/head.ftl" />
    <!-- left view -->
    <#include "/common/left.ftl" />

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel"></h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body">
                    <form id="limitfm">
                        <input type="text" name="parentId" id="parentId" hidden>
                        <input type="text" name="id" id="id" hidden>
                        <div class="form-inline">
                            <label class="col-sm-3" for="limitName">权限名称</label>
                            <input type="text" class="form-control col-sm-8" name="limitName" id="limitName" placeholder="请输入权限名称" />
                        </div>
                        <div class="form-inline distance">
                            <label class="col-sm-3" for="type">权限类型</label>
                            <select class="form-control col-sm-8" name="type" id="type">
                                <option value="1">菜单</option>
                                <option value="2">接口</option>
                                <option value="3">页面（非菜单）</option>
                            </select>
                        </div>
                        <div class="form-inline distance url">
                            <label class="col-sm-3" for="url">url地址</label>
                            <input type="text" class="form-control col-sm-8" name="url" id="url" placeholder="请输入url地址" />
                        </div>
                        <div class="form-inline distance">
                            <label class="col-sm-3" for="requireLimit">权限代码</label>
                            <input type="text" class="form-control col-sm-8" name="requireLimit" id="requireLimit" placeholder="请输入权限代码" />
                        </div>
                        <div class="form-inline distance">
                            <label class="col-sm-3" for="orderNo">排序</label>
                            <input type="number" class="form-control col-sm-8" name="orderNo" id="orderNo" placeholder="请输入排序" />
                        </div>
                        <div class="form-inline distance">
                            <label class="col-sm-3" for="descript">权限描述</label>
                            <textarea class="form-control col-sm-8" name="descript" id="descript" placeholder="请输入权限描述" rows="4"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button id="limitSubmit" type="button" class="btn btn-primary">提交更改</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">权限管理</h1>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- 内容 -->
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <table id="table"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var $table = $('#table');

    $(function() {
        $table.bootstrapTable({
            method: "POST",
            url: '/user/authority/list',
            idField: 'id',
            columns: [
                {
                    field: 'limitName',
                    title: '名称'
                },
                {
                    field: 'type',
                    title: '类型',
                    sortable: false,
                    align: 'center',
                    formatter: 'statusFormatter'
                },
                {
                    field: 'requireLimit',
                    title: '权限值',
                    align: 'center'
                },
                {
                    field: 'opt',
                    title: '操作',
                    width: 400,
                    formatter: 'optFormatter'
                }
            ],
            treeShowField: 'limitName',
            parentIdField: 'parentId',
            onPostBody: function() {
                var columns = $table.bootstrapTable('getOptions').columns

                if (columns && columns[0][1].visible) {
                    $table.treegrid({
                        initialState:"collapsed",
                        treeColumn: 0,
                        onChange: function() {
                            $table.bootstrapTable('resetView')
                        }
                    })
                }
            },
            responseHandler: function (result) {
                if(result.status==1){
                    return result.data;
                }
            }
        })
    })

    function optFormatter(value, row, index) {
        //编辑按钮
        let editBtn = '<button style="margin-right:5px" type="button" class="btn btn-primary" onclick="edit(\''+ row.id +'\')">编辑</button>';
        //添加按钮
        let addBtn = '<button style="margin-right:5px" type="button" class="btn btn-primary" onclick="add(\''+ row.id +'\')">添加</button>';
        //删除按钮
        let delBtn = '<button type="button" class="btn btn-primary" onclick="del(\''+ row.id +'\')">删除</button>';
        if(row.type === 2){
            return editBtn+delBtn;
        }
        return editBtn+addBtn+delBtn;
    }

    function statusFormatter(value, row, index) {
        //1：菜单，2：接口，3：非菜单（页面）
        if (value === 1) {
            return '<span class="label">菜单</span>'
        }else if(value === 2) {
            return '<span class="label">接口</span>'
        }else if(value === 3) {
            return '<span class="label">页面（非菜单）</span>'
        }
    }

    //删除权限
    function del(id) {
        myConfirm("确认！", "确定要删除这个权限么？", function(r) {
            if (r) {
                $.ajax({
                    type: "post",
                    url: "/user/authority/delete",
                    data: {
                        "id": id
                    },
                    success: function (data) {
                        if (data.status === 1) {
                            myAlert("提示", "删除成功", function(){
                                $("#table").bootstrapTable("refresh");
                            })
                        } else {
                            myAlert("操作失败", data.message, function(){
                                $("#table").bootstrapTable("refresh");
                            })
                        }
                    }
                })
            }
        });
    }

    $("#type").bind("change", function(val){
        let type = $("#type").val();
        if(type == 1 || type == 3){
            $(".url").show();
        }
        if(type == 2){
            $(".url").hide();
        }
    })

    //初始化表单
    function initForm() {
        $("#limitName").val("");
        $("#type").val(1);
        $("#url").val("");
        $("#requireLimit").val("");
        $("#orderNo").val(0);
        $("#descript").val("");
    }

    //编辑权限
    function edit(id) {
        $("#myModalLabel").text("编辑权限");
        //初始化权限信息
        $.ajax({
            type: "post",
            url: "/user/authority/detail",
            data: {id: id},
            success: function (result) {
                if (result.status === 1) {
                    $("#id").val(result.data.id);
                    $("#parentId").val(result.data.parentId);
                    $("#limitName").val(result.data.limitName);
                    $("#type").val(result.data.type);
                    $("#url").val(result.data.url);
                    $("#requireLimit").val(result.data.requireLimit);
                    $("#orderNo").val(result.data.orderNo);
                    $("#descript").val(result.data.descript);
                    $('#myModal').modal('show');
                } else {
                    myAlert("操作失败", result.message)
                }
            }
        })
        //提交
        $("#limitSubmit").bind("click", function() {
            //参数校验
            let limitName = $("#limitName").val();
            if(typeof(limitName) == undefined || limitName == null || limitName == ""){
                myAlert("提示", "权限名称不能为空");
                return;
            }
            let type = $("#type").val();
            let url = $("#url").val();
            if((type == 1 || type ==3) && (typeof(url) == undefined || url == null || url == "")){
                myAlert("提示", "权限url不能为空");
                return;
            }
            $.ajax({
                type: "post",
                url: "/user/authority/add",
                data: JSON.stringify($("#limitfm").serializeObject()),
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    if (data.status === 1) {
                        myAlert("提示", "提交成功", function(){
                            $("#table").bootstrapTable("refresh");
                            $('#myModal').modal('hide');
                        })
                    } else {
                        myAlert("操作失败", data.message, function(){
                            $("#table").bootstrapTable("refresh");
                        })
                    }
                }
            })
        })
    }

    //添加权限
    function add(id) {
        $("#myModalLabel").text("添加权限");
        //清空所有编辑项
        $("#id").val("");
        initForm();
        $('#myModal').modal('show');
        $("#parentId").val(id);
        //提交
        $("#limitSubmit").bind("click", function() {
            //参数校验
            let limitName = $("#limitName").val();
            if(typeof(limitName) == undefined || limitName == null || limitName == ""){
                myAlert("提示", "权限名称不能为空");
                return;
            }
            let type = $("#type").val();
            let url = $("#url").val();
            if((type == 1 || type ==3) && (typeof(url) == undefined || url == null || url == "")){
                myAlert("提示", "权限url不能为空");
                return;
            }
            $.ajax({
                type: "post",
                url: "/user/authority/add",
                data: JSON.stringify($("#limitfm").serializeObject()),
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    if (data.status === 1) {
                        myAlert("提示", "提交成功", function(){
                            $('#myModal').modal('hide');
                            $("#table").bootstrapTable("refresh");
                        })
                    } else {
                        myAlert("操作失败", data.message, function(){
                            $("#table").bootstrapTable("refresh");
                        })
                    }
                }
            })
        })
    }
</script>
</html>
